<template>
	<view class="projectDetail" v-cloak>
		<u-toast ref="uToast"></u-toast>
		<shopCarShow :showPop="showBottom" @refuse="refuse" @submit="subNearCar" :title='bottomTip' >
		</shopCarShow>
		<view class="current">
		</view>
		<view class="myTitle">
			<view class="returLeft" @click="returnLeft">
				<u-icon name="arrow-left" class="" size="24" color="#fff"></u-icon>
			</view>
			<view class="titileCneter">
				项目详情
			</view>
		</view>
		<view class="shopContent">
			<view class="shopDetails">
				<view class="recommend f-column">
					<view class="list f-column" v-for="(item,index) in list" :key="index" @click="goDetails(item.id)">
						<view class="list_item" :style="{background:item.status==1?'#fff':'#fff'}">
							<view class="content">
								<view class="item" @click="goCard(item)">
									<view class="entityList">
										<view class="num _border shopTitle">
											{{item.name}}
										</view>
										<view class="name">
											<text>{{item.msg}}</text>
											<view class="right">
												<image src="../../static/icon/my/goIcon2.png" mode="" class="image">
												</image>
												<text class="themeColor">导航</text>
											</view>
										</view>
										<view class="name mt-1">
											<text>{{item.msg}}</text>
											<view class="right">
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cardsDetails">
				<view class="list_item">
					<view class="title">
						开始洗车
					</view>
					<view class="listType">
						<view class="left_type">
							<view class="down">
								<view class="">
									团洗优
								</view>
								<view class="">
									惠价
								</view>
							</view>
							<view class="type_name">
								团洗洗车
							</view>
						</view>
						<view class="x-r">
							<view class="down_price">
								¥15.00/次
							</view>
							<view class="price">
								原价¥32.00
							</view>
						</view>
					</view>
					<view class="listType">
						<view class="left_type">
							<view class="down">
								<view class="">
									团洗优
								</view>
								<view class="">
									惠价
								</view>
							</view>
							<view class="type_name">
								半价优惠洗车
							</view>
						</view>
						<view class="x-r">
							<view class="down_price">
								¥15.00/次
							</view>
							<view class="price">
								原价¥32.00
							</view>
						</view>
					</view>
				</view>
				<view class="list_item">
					<view class="title">
						请选择你的卡券
					</view>
					<view class="selectCard jc-sb" @click="showCard">
						<view class="">
							请选择你的卡券
						</view>
						<view class="">
							<u-icon name="arrow-down-fill" color="#2CB9A4" size="24"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
	
	</view>
</template>

<script>
	import shopCarShow from "@/components/index/shopCarShow.vue"
	// import {
	// 	projectInfo,
	// } from '@/request/api.js'
	export default {
		props: {
			item: {
				type: String,
				default: ''
			}
		},
		components: {
			shopCarShow
		},
		onLoad(res) {

		},
		data() {
			return {
				showBottom: false,
				bottomTip: '请选择你的卡券',
				projectList: [],
				formData: {},
				user_id: '',
				list: [{
						name: '锦江店优惠洗车',
						msg: '锦成都市江区才华大街20号',
						id: 1,
						bh: 'ABCD65343434',
						gl: '9.9',
						status: 1,
						icon: '../../static/logo.png'
					}

				],
			}
		},
		onShow() {
			// this.typeList()
		},
		methods: {
			showCard() {
				console.log(2222)
				this.showBottom = true;
			},
			refuse() {
				this.showBottom = false
			}
		}
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}
	radio-group text {
		font-size: 40rpx;
	}

	radio .wx-radio-input {
		border-radius: 50%;
		/* 圆角 */
		width: 40rpx;
		border: 1rpx solid #F6F6F6;
		height: 40rpx;
	}

	radio .wx-radio-input.wx-radio-input-checked {
		border: none;
		background: #2CB9A4;
	}

	radio .wx-radio-input.wx-radio-input-checked::before {
		border-radius: 50%;
		/* 圆角 */
		width: 40rpx;
		/* 选中后对勾大小，不要超过背景的尺寸 */
		height: 40rpx;
		/* 选中后对勾大小，不要超过背景的尺寸 */
		line-height: 40rpx;
		text-align: center;
		font-size: 40rpx;
		/* 对勾大小 30rpx */
		color: #fff;
		/* 对勾颜色 白色 */
		background: #2CB9A4;
		/* transform: translate(-50%, -50%) scale(1); */
	}
</style>
<style lang="scss" scoped>
	[v-cloak] {
		display: none !important;
	}

	._border {
		border-bottom: 0.5px solid rgba(217, 217, 217, 0.3);
	}

	.shopTitle {
		padding-bottom: 40rpx;
		color: #000000;
		font-weight: 600;
		margin-bottom: 20rpx;
		font-size: 32rpx;
	}

	.shopContent {
		margin-top: 200rpx;

		.shopDetails {
			position: relative;

			.recommend {
				padding: 0 20rpx;
				margin-top: 40rpx;

				.title {
					font-size: 30rpx;
					line-height: 20px;
					color: #222222;
					font-weight: 600;
				}

				.list {
					margin-top: 20rpx;

					.content {
						background-color: #fff;
						// box-shadow: 0px 0px 10px rgba(8, 23, 56, 0.05);
						// border-radius: 10px;
						// padding: 20rpx;
						// margin-top: 20rpx;

						.conBot {
							align-items: flex-end;

							.f-row {
								display: flex;
								align-items: flex-end;
							}

							.goNear {
								background: #2CB9A4;
								color: #fff;
								height: 60rpx;
								justify-content: center;
								align-items: center;
								border-radius: 10rpx;
								padding: 10rpx 20rpx;
								font-size: 32rpx;
								align-items: center;
							}

							display: flex;
							justify-content: space-between;
							color: #2CB9A4;

							.down {
								background: #C0EAE4;
								justify-content: center;
								display: flex;
								flex-direction: column;
								align-items: center;
								padding: 10rpx;
								font-size: 22rpx;
								border-radius: 10rpx;
								margin-right: 10rpx;
							}

							.down_price {
								margin-right: 40rpx;
							}

							.price {
								margin-right: 10rpx;
								font-size: 26rpx;
							}
						}
					}

					.list_item {
						display: flex;
						flex-direction: column;
						background: #2CB9A4;
						border-radius: 20rpx;
						padding: 20rpx;

						.title {
							color: #fff;
							font-size: 30rpx;
							font-weight: 600;
						}

						.item {
							display: flex;
							color: #505050;
							margin: 15rpx 0;

							padding-bottom: 15rpx;
							box-sizing: border-box;
							background: #fff;
							border-radius: 20rpx;

							.icon {
								width: 72rpx;
								height: 72rpx;
								width: 100rpx;
								height: 100rpx;

								.image {
									width: 100%;
									height: 100%;
								}
							}

							.entityList {
								flex: 1;
								display: flex;
								flex-direction: column;
								overflow: hidden;
								text-overflow: ellipsis;
								justify-content: space-between;

								.name {
									display: flex;
									justify-content: space-between;
									margin-left: 15rpx;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
									color: #BABABA;
									font-size: 26rpx;

									.image {
										width: 26rpx;
										height: 26rpx;
										margin-right: 10rpx;
									}
								}

								.num {
									margin-left: 15rpx;
									margin-top: 10rpx;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
								}
							}
						}
					}
				}
			}
		}

		.cardsDetails {
			margin: 20rpx;
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			display: flex;
			flex-direction: column;

			.list_item {
				margin-left: 15rpx;

				.selectCard {
					display: flex;
					justify-content: space-between;
					background: rgba(192, 234, 228, 0.2);
					border: 0.5px solid #2CB9A4;
					border-radius: 5px;
					padding: 20rpx;
					color: #2CB9A4;
				}
			}

			.title {
				color: #000000;
				font-weight: 600;
				margin-bottom: 20rpx;
				margin-top: 20rpx;
				font-size: 32rpx;
			}

			.listType {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #2CB9A4;
				padding-bottom: 20rpx;
				border-bottom: 0.5px solid rgba(217, 217, 217, 0.3);
				margin-top: 20rpx;

				.left_type {
					display: flex;
					align-items: center;

					.type_name {
						color: #000;
						font-size: 30rpx;
						font-weight: 600;
						margin-left: 15rpx;
					}
				}

				.down {
					background: #C0EAE4;
					justify-content: center;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 10rpx;
					font-size: 22rpx;
					border-radius: 10rpx;
					margin-right: 10rpx;
				}

				.down_price {
					margin-right: 20rpx;
					font-size: 28rpx;
				}

				.price {
					margin-right: 10rpx;
					font-size: 26rpx;
				}
			}
		}
	}

	.projectDetail {
		position: relative;
		overflow: hidden;
	}

	::v-deep .u-textarea {
		// background-color: #fff !important;
	}

	.alterPro {
		position: fixed;
		width: 100%;
		bottom: 0px;
		z-index: 0;
		left: 0;
		background: #fff;
		justify-content: center;
		align-items: center;
		height: 60px;
		// background: rebeccapurple;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		display: flex;
	}

	.scrollHight {
		top: 100px;
		position: absolute;
		// top: 100px;
		// background: rgba(255, 255, 255, 0.7);
		overflow: scroll;
	}

	.upload {
		padding: 20rpx;
		margin: 20px 20rpx 50px 0;
		background: #fff;
		z-index: 110;
	}

	.current {
		background: url(../../static/images/index/shopBg.png);
		background-size: 100% 100%;
		height: 232px;
		background-repeat: no-repeat;
		position: fixed;
		top: 0;
		overflow: hidden;
		left: 0;
		width: 100%;
		z-index: 0;
	}

	.current1 {
		// background: url(../../../static/my/bg.jpg);
		// background: url(../../static/selectBot.png);
		background: linear-gradient(to bottom, rgba(21, 125, 250, 0), #c1e0fdbf);
		background-size: 100% 100%;
		height: 232px;
		background-repeat: no-repeat;
		position: fixed;
		bottom: 0;
		overflow: hidden;
		left: 0;
		width: 100%;
		z-index: 0;
	}

	.top {
		width: 100%;
		top: 65px;
		position: fixed;
		z-index: 9999;
		// background: linear-gradient(to right , rgba(21, 125, 250, 0), #c1e0fdbf);
	}

	.navTitle {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #979797;
		padding: 20rpx 0;
	}

	.navItem {
		width: 33.33%;
		text-align: center;
		// z-index: 100;
	}

	.myTitle {
		position: fixed;
		z-index: 1;

		// background: linear-gradient(to bottom, #fff, #e1f0fe);
		.returLeft {
			top: 70rpx;
			left: 40rpx;
			position: fixed;
		}

		.titileCneter {
			top: 70rpx;
			left: 50%;
			transform: translate(-50%);
			position: fixed;
			color: #fff;
			z-index: 110;
		}
	}

	.project {
		position: relative;
		margin-top: 150rpx;
	}

	.showView {
		// background: #fff;
	}

	.my_view {
		// margin-top: 100px;
		// overflow-y: auto;
		// position: initial;
		// background: #fff;
		// height: calc(100vh - 100px);
		margin-top: 119px;
		overflow-y: scroll;
		position: inherit;
		background: #fff;
		height: calc(100vh - 170px);
		padding-bottom: 100px;
		z-index: 999999999999999999;
	}
</style>

<style scoped lang="scss">
	// .current {
	// 	background: url(../../../static/my/bg.jpg);
	// 	// background: url(../../static/selectBot.png);
	// 	background-size: 100% 100%;
	// 	height: 232px;
	// 	background-repeat: no-repeat;
	// 	position: fixed;
	// 	top: 0;
	// 	overflow: hidden;
	// 	left: 0;
	// 	width: 100%;
	// 	z-index: 0;


	// }

	// .current1 {
	// 	// background: url(../../../static/my/bg.jpg);
	// 	// background: url(../../static/selectBot.png);
	// 	background: linear-gradient(to bottom, rgba(21, 125, 250, 0), #c1e0fdbf);
	// 	background-size: 100% 100%;
	// 	height: 232px;
	// 	background-repeat: no-repeat;
	// 	position: fixed;
	// 	bottom: 0;
	// 	overflow: hidden;
	// 	left: 0;
	// 	width: 100%;
	// 	z-index: 0;
	// }

	// .my_view {
	// 	height: 87vh;
	// 	overflow-y: scroll;
	// 	overflow-x: hidden;
	// 	-webkit-overflow-scrolling: touch !important;
	// 	// z-index: 111;
	// }

	// .myTitle {
	// 	width: 100%;

	// 	.returLeft {
	// 		top: 40px;
	// 		left: 40rpx;
	// 		position: fixed;
	// 		width: 100rpx;
	// 		z-index: 9999999;
	// 	}

	// 	.titileCneter {
	// 		top: 40px;
	// 		left: 50%;
	// 		transform: translate(-50%);
	// 		position: fixed;
	// 		color: #000;
	// 		z-index: 110;
	// 	}
	// }

	// .projectDetail {
	// 	position: relative;
	// 	font-size: 28rpx;
	// 	margin-top: 150rpx;
	// 	background: #fff;;
	// 	.top {
	// 		// position: fixed;
	// 		width: 100%;
	// 		z-index: 110;
	// 		height: 40rpx;
	// 		top: 140rpx;
	// 	}

	// 	.navTitle {
	// 		display: flex;
	// 		align-items: center;
	// 		justify-content: center;
	// 		color: #979797;
	// 		padding: 20rpx 0;
	// 	}

	// 	.navItem {
	// 		width: 33.33%;
	// 		text-align: center;
	// 		z-index: 100;
	// 	}

	// 	.showView {
	// 		background: #fff;
	// 	}
	// }
</style>